<template>
  <CommonPage>
    <AppCrud
      ref="tableRef"
      :is-table="false"
      @on-query="getData()"
      :is-pagination="false"
      v-model:query="query"
    >
      <query-item label="部门名称">
        <el-input
          placeholder="请输入部门名称"
          v-model="query.name"
          clearable
        ></el-input>
      </query-item>

      <template #action>
        <el-button type="primary" @click="handleAdd">
          <template #icon
            ><el-icon><Plus></Plus></el-icon
          ></template>
          创建部门
        </el-button>
      </template>
      <template #data="{ height }">
        <el-table
          :data="departments"
          :height="height"
          border
          class="f-table"
          v-loading="loading"
          row-key="id"
          default-expand-all
        >
          <el-table-column prop="name" width="200" label="部门名称" />
          <el-table-column
            prop="number"
            align="center"
            width="150"
            label="部门人数"
          >
            <template #default="{ row }">{{ row._count?.employees }}</template>
          </el-table-column>
          <el-table-column prop="leader" width="150" label="负责人" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column
            prop="createdAt"
            align="center"
            width="200"
            label="创建时间"
          />
          <el-table-column align="center" width="230" label="操作">
            <template #default="{ row }">
              <el-space>
                <el-button type="info" size="small" @click="onAddChildren(row)"
                  >添加子部门</el-button
                >

                <el-button type="primary" size="small" @click="handleEdit(row)"
                  >编辑</el-button
                >

                <el-button
                  type="danger"
                  size="small"
                  @click="handleDelete(row.id)"
                  >删除</el-button
                >
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </AppCrud>

    <AppModal ref="modalRef" width="500px">
      <el-form ref="formRef" :model="formModel" label-width="auto">
        <el-form-item
          label="部门名称"
          prop="name"
          :rules="[{ required: true, message: '此为必填项' }]"
        >
          <el-input
            placeholder="请输入部门名称"
            v-model="formModel.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="上级部门">
          <el-tree-select
            check-strictly
            :data="treeData"
            clearable
            @clear="() => (formModel.parentId = null)"
            v-model="formModel.parentId"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="部门负责人">
          <el-input
            placeholder="请输入部门负责人"
            v-model="formModel.leader"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            placeholder="请输入备注"
            type="textarea"
            v-model="formModel.remark"
          ></el-input>
        </el-form-item>
      </el-form>
    </AppModal>
  </CommonPage>
</template>
<script setup lang="ts">
import { AppCrud, AppModal, CommonPage, QueryItem } from "@/components/common";
import departmentApi, { DepartmentDto } from "@/api/department.ts";
import { ElButton } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { useCrud } from "@/hooks/useCrud.ts";
import utils from "xe-utils";
import useLoading from "@/hooks/loading.ts";

defineOptions({
  name: "Department",
});

const query = ref({
  name: null,
});

const { loading, setLoading } = useLoading();

const departments = ref<DepartmentDto[]>([]);
const treeData = ref([]);

const tableRef = ref();
const {
  modalRef,
  formRef,
  formModel,
  modalAction,
  handleEdit,
  handleAdd,
  handleDelete,
} = useCrud<DepartmentDto>({
  name: "部门",
  initForm: {
    name: null,
    leader: null,
    parentId: null,
    remark: null,
  },
  doCreate: departmentApi.create,
  doUpdate: departmentApi.update,
  doDelete: departmentApi.delete,
  doGet: departmentApi.get,
  refresh: () => {
    getData();
  },
});

function onAddChildren(data: DepartmentDto) {
  handleAdd({ parentId: data.id });
}

function getData() {
  setLoading(true);
  departmentApi.all(query.value).then(({ data }) => {
    departments.value = utils.toArrayTree(data);

    const list = data.map((item) => {
      return {
        id: item.id,
        value: item.id,
        label: item.name,
        parentId: item.parentId,
      };
    });

    treeData.value = utils.toArrayTree(list, {
      id: "value",
      parentId: "parentId",
    });
    setTimeout(() => {
      setLoading(false);
    }, 100);
  });
}

onMounted(() => {
  getData();
});
</script>
